<template>
    <div>
        <headers />
        <div class="container mt-30 mb-30">
            <el-card>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/' }">教学中心</el-breadcrumb-item>
                    <el-breadcrumb-item>教学内容详情</el-breadcrumb-item>
                </el-breadcrumb>


                <div class="article">
                    <template v-if="infoLength > 0">
                        <h1>{{ info.title }}</h1>
                        <div class="info" v-if="info">
                            <span>{{ info.create_time }}</span> | <span>浏览：{{ info.view_num }}</span> | <span>{{ info.type === 1? '教学视频' : '教学资料' }}</span>
                        </div>
                        <div class="content">
                            {{ info.content }}
                        </div>
                    </template>
                    <template v-else>
                        <div class="content">
                            <el-empty :description="description">
                                <el-button type="primary" @click="$router.push('/biaoxun')">返回列表</el-button>
                            </el-empty>
                        </div>
                    </template>
                </div>
            </el-card>
        </div>
        <footers />
    </div>
</template>

<script>
import headers from "@/components/header.vue"
import footers from "@/components/footer.vue"
import { getSpuPublishInfo } from "@/api/apis"
export default {
    name: "newsDetails",
    components: {
        headers,
        footers
    },
    data () {
        return {
            id: this.$route.params.id,
            info: '',
            infoLength: 0,
            description: "暂无数据"
        }
    },
    created () {
        this.getInfo();
    },
    methods: {
        getInfo () {
            getSpuPublishInfo(this.id).then(res => {
                if (res.code === 1) {
                    this.info = res.data
                    this.infoLength = Object.keys(this.info).length
                } else {
                    this.infoLength = 0
                    this.description = res.msg
                    this.$message.error(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.article {
    h1 {
        font-size: 24px;
        font-weight: 500;
        margin: 0;
        text-align: center;
    }

    .info {
        line-height: 50px;
        border-bottom: 1px solid #f3f3f3;
        margin-bottom: 20px;
        color: #3A9B18;
        font-size: 14px;
        text-align: center;

        span+span {
            margin-left: 10px;
        }

        span {
            margin-right: 10px;
        }
    }

    .content {
        min-height: 300px;

        a {
            color: #03C;

            &:hover {
                color: #f30;
            }
        }

        p {
            margin-bottom: 20px;
            line-height: 30px;
        }

        img {
            max-width: 100%;
        }
    }

}
</style>